<template>
  <div class="performance-chart">
    <div id="performance-chart" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('performance-chart');
      const myChart = echarts.init(chartDom);

      // 生成X轴数据（假设是时间点）
      const xAxisData = Array.from({ length: this.data.length }, (_, i) => `第${i+1}次`);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [{
          data: this.data,
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#2196F3'
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#2196F3'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(33, 150, 243, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(33, 150, 243, 0.1)'
              }
            ])
          }
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.performance-chart {
  width: 100%;
  height: 300px;
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
